<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>Edge Panel</title>
    <style>
        html, body {
            margin: 0;
            padding: 0;
            background: transparent;
            height: 100%;
            width: 100%;
            overflow: hidden;
        }

        /* webview 最底层 */
        #webview-container {
            position: absolute;
            width: 100%;
            height: calc(100% - 60px); /* 上下留广告位 */
            top: 30px;
        }

        #webview {
            width: 100%;
            height: 100%;
            border: none;
        }

        /* 顶部广告栏（标题栏 + 广告） */
        #title-bar {
            width: 100%;
            height: 30px;
            background: linear-gradient(to right, #f8f0e8, #f0e8d8);
            display: flex;
            align-items: center;
            justify-content: space-between;
            border-bottom: 1px solid #ccc;
            -webkit-app-region: drag;
            font-size: 13px;
            font-family: "Microsoft YaHei", sans-serif;
            color: #665c54;
            position: relative;
        }

        /* 广告文字 */
        #title-text {
            flex: 1;
            text-align: center;
            pointer-events: none;
            font-style: italic;
        }

        /* 按钮容器 */
        #left-controls, #right-controls {
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 0 6px;
            gap: 6px;
            -webkit-app-region: no-drag;
            transition: opacity 0.3s ease;
        }

        /* 按钮样式 */
        .ad-btn {
            background-color: rgba(150, 140, 130, 0.15);
            border: 1px solid rgba(120, 110, 100, 0.3);
            color: rgba(80, 70, 60, 0.8);
            padding: 0 6px;
            font-size: 12px;
            border-radius: 3px;
            cursor: pointer;
            transition: background-color 0.3s ease, opacity 0.3s ease;
        }

        .ad-btn:hover {
            background-color: rgba(150, 140, 130, 0.3);
        }

        /* 广告风格的关闭按钮 */
        #close-btn {
            background-color: transparent;
            border: none;
            color: rgba(80, 70, 60, 0.6);
            font-weight: bold;
            font-size: 14px;
            cursor: pointer;
            padding: 0 5px;
            border-radius: 50%;
            transition: color 0.3s ease;
        }

        #close-btn:hover {
            color: rgba(200, 50, 50, 0.8);
        }

        /* 默认隐藏前进、后退、缩小按钮 */
        #left-controls, #minimize-btn {
            opacity: 0;
        }

        /* 鼠标移入时显示 */
        #title-bar:hover #left-controls,
        #title-bar:hover #minimize-btn {
            opacity: 1;
        }

        #minimize-btn,#back,#forward{
            border: none;
        }

        /* 底部广告栏 */
        #bottom-ad {
            position: absolute;
            bottom: 0;
            width: 100%;
            height: 30px;
            background: linear-gradient(to right, #f0e8d8, #f8f0e8);
            border-top: 1px solid #ccc;
            text-align: center;
            font-size: 13px;
            line-height: 30px;
            color: #665c54;
            font-family: "Microsoft YaHei", sans-serif;
            font-style: italic;
        }
    </style>
</head>
<body>
<div id="container">
    <div id="title-bar">
        <div id="left-controls">
            <button id="back" class="ad-btn">❮</button>
            <button id="forward" class="ad-btn">❯</button>
            <button id="reload" onclick="window.location.reload()">⭮</button>
        </div>
        <div id="title-text">装备全靠爆！开局一刀999，狂砍BOSS爆神装！</div>
        <div id="right-controls">
            <button id="minimize-btn" class="ad-btn" onclick="minimize()">➖</button>
            <button id="close-btn" onclick="winClose()">×</button>
        </div>
    </div>

    <div id="webview-container">
        <webview id="webview" allowpopups></webview>
    </div>

    <div id="bottom-ad">充100送1000，爆率提升300%，快来加入吧！</div>
</div>

<script>
    const urlParams = new URLSearchParams(window.location.search);
    const url = urlParams.get('url');
    const winName = urlParams.get('winName');
    const topText = urlParams.get('topText');
    const bottomText = urlParams.get('bottomText');

    const webview = document.getElementById('webview');
    webview.src = url && url.startsWith("http") ? url : "http://" + (url || "example.com");

    const backBtn = document.getElementById('back');
    const forwardBtn = document.getElementById('forward');
    const titleText = document.getElementById('title-text');
    const bottomAd = document.getElementById('bottom-ad');

    titleText.textContent = topText;
    bottomAd.textContent = bottomText;

    backBtn.addEventListener('click', () => {
        if (webview.canGoBack()) webview.goBack();
    });

    forwardBtn.addEventListener('click', () => {
        if (webview.canGoForward()) webview.goForward();
    });

    webview.addEventListener('new-window', (e) => {
        webview.src = e.url;
    });

    function minimize() {
        window.utools.sendToParent('minimize', winName);
    }

    function winClose() {
        window.utools.sendToParent('win-close', winName);
        window.close();
    }
</script>
</body>
</html>
